import React, { Component } from 'react'
import Header from '../../components/Header/header'
import { reqdetail, reqcaradd } from '../../request/api';
import { filterPrice } from '../../filters/index';
import { Tabs } from 'antd-mobile/es/components/tabs/tabs';

import { imgPre } from "../../request/http";
import { Button, Mask, Popup, Toast } from 'antd-mobile';

import kefu from '../../assets/img/button_shortcut1.png';
import dianpu from '../../assets/img/button_shortcut2.png';
import shopcar from '../../assets/img/button_shortcut3.png';

import { Link } from 'react-router-dom';

import './detail.less'

export default class detail extends Component {
  constructor() {
    super();
    this.state = {
      info: {},
      visible: false,//弹窗是否显示
      num: 1//数量
    }
  }
  componentDidMount() {
    // 2.请求数据
    let params = this.props.match.params;
    reqdetail({ id: params.id }).then((res) => {
      if (res.data.code == 200) {
        let obj = res.data.list[0];
        // obj.specsattr = obj.specsattr.split(",");
        this.setState(
          {
            info: obj,
          },
          () => {
            // this.des.current.innerHTML = this.state.info.description;
          }
        );
      }
    });
  }
  // 4.功能实现
  setVisible() {//弹窗
    this.setState({
      visible: false
    })
  }
  addShop = () => {//点击加购按钮
    // 显示弹窗
    this.setState({
      visible: true
    })
  }
  sub() {//数量减少按钮
    if (this.state.num <= 1) {
      this.state.num = 1;
      Toast.show({
        content: "不能再少了哦~"
      })
      return;
    }
    this.setState({
      num: this.state.num - 1
    })
  }
  add() {//数量增加按钮
    this.setState({
      num: this.state.num + 1
    })
  }
  sure() {
    this.setState({
      visible: false
    })
    let userInfo = JSON.parse(sessionStorage.getItem('isLogin'));
    let uid = userInfo.uid;
    let goodsid = this.state.info.id;
    let num = this.state.num;
    let type = this.props.match.params.type;
    reqcaradd({
      uid,
      goodsid,
      num,
      type
    }).then(res => {
      if (res.data.code == 200) {
        Toast.show({
          content: res.data.msg,
        })
      } else {
        Toast.show({
          content: '加入购物车失败'
        })
      }
    })
  }
  render() {
    var arr = ['商品', '评价', '详情', '推荐'];
    const { info, visible, num } = this.state;
    // console.log(info);
    return (
      <div className='detail'>
        <Header title="商品详情" back></Header>

        <div className='nav'>
          <Tabs>
            {arr.map((item, index) => {
              return (
                <Tabs.Tab title={item} key={index}>

                </Tabs.Tab>
              )
            })}
          </Tabs>
        </div>

        <div className='img'>
          <img src={imgPre + info.img} alt="" />
        </div>
        <div className='price'>
          <div className='pricename'>{info.goodsname}</div>
          <div className='pricekill'>秒杀价：{info.price}</div>
          <del className='pricefirst'>原价：{info.market_price}</del>
          <p>{info.description}</p>
        </div>

        {/* 弹窗部分 */}
        {/* 遮罩层 */}
        <Mask visible={visible} onMaskClick={() => this.setVisible()} />
        {/* 弹窗 */}
        <Popup
          visible={visible}
          onMaskClick={() => {
            this.setVisible()
          }}
          bodyStyle={{ height: '40vh' }}
        >
          <div className='nums'>
            购买数量：
            <span>
              {/* {num} */}
              <button onClick={() => this.sub()}>-</button>
              <input type="text" value={num} onChange={() => { }} />
              <button onClick={() => this.add()}>+</button>
            </span>
          </div>
          <div className='sure' onClick={() => this.sure()}>确定</div>
        </Popup>

        {/* 购买底部标签 */}
        <footer className='shopfooter'>
          <Link to="" className='one'>
            <img src={kefu} alt="" />
            <div>客服</div>
          </Link>
          <Link to="" className='one'>
            <img src={dianpu} alt="" />
            <div>店铺</div>
          </Link>
          <Link to="/index/shop" className='one'>
            <img src={shopcar} alt="" />
            <div>购物车</div>
          </Link>
          <div className='two1'>
            <div onClick={() => { this.addShop() }}>加入购物车</div>
          </div>
          <div className='two2'>
            <div>立即购买</div>
          </div>
        </footer>
      </div>
    )
  }
}
